import React,{PureComponent} from 'react';
import { Form, Input, Button, Alert, Divider, Cascader, Card, Icon, Upload, Radio,DatePicker,InputNumber} from 'antd';
import { routerRedux } from 'dva/router';
import constants from '../../../common/constants';
import { digitUppercase } from '../../../utils/utils';
import styles from './goodsManage.less';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
import moment from 'moment';

export default class GoodsSI extends PureComponent {

    state = {
        loading: false,
        isPromot: this.props.data.is_promote,
        isXiangou: this.props.data.is_xiangou,
        promote_start_date: this.props.data.promote_start_date || '',
        promote_end_date: this.props.data.promote_end_date || '',
        xiangou_start_date: this.props.data.xiangou_start_date || '',
        xiangou_end_date: this.props.data.xiangou_end_date || ''
    };

    onPrev = () => {
        const {dispatch} = this.props;
        dispatch(routerRedux.push('/goods/addGoods/goodsGI'));
    };

    onValidateForm = (e) => {
        const {dispatch, data} = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                dispatch({
                    type: 'goodsManage/keepData',
                    payload: {
                        ...values,
                        promote_start_date: this.state.promote_start_date,
                        promote_end_date: this.state.promote_end_date,
                        xiangou_start_date: this.state.xiangou_start_date,
                        xiangou_end_date: this.state.xiangou_end_date
                        // ...data
                    },
                });
                dispatch(routerRedux.push('/goods/addGoods/goodsAttr'));
            }
        });
    }
    promote = (e) => {
        this.setState({
            isPromot:!this.state.isPromot
        })
    }

    xiangou = (e) => {
        this.setState({
            isXiangou: !this.state.isXiangou
        })
    }
    onPromoteChange = (value, dateString) => {
        this.setState({
            promote_start_date: dateString[0],
            promote_end_date: dateString[1]
        })
    }
    onXiangouChange = (value, dateString) => {

        this.setState({
            xiangou_start_date: dateString[0],
            xiangou_end_date: dateString[1],
        })
    }
    //单步骤保存
    stepSubmit = (e) => {
        const {dispatch, data} = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            console.log("values",values)
            console.log("====")
            if (!err) {
                let user_id = '';
                const userInfoState = sessionStorage.getItem("userInfoState");
                if (userInfoState !== null) {
                    const {userInfo} = JSON.parse(userInfoState);
                    user_id = userInfo.user_id;
                }
                dispatch({
                    type: 'goodsManage/keepData',
                    payload: {
                        ...values,
                    },
                    callback: (response) => {
                        if (response){
                            const editType = data.editType;
                            this.props.goodsSISubmit(editType,user_id,values);
                        }
                    }
                });
            }
        });
    }
    render() {
        const { formItemLayout, data, dispatch, submitting} = this.props;
        const {getFieldDecorator, getFieldValue} = this.props.form;
        const isDisplay=data.editType==='add'?true:false;
        return(
            <Card title="特殊信息" bordered={false}>
                <Form layout="horizontal" className={styles.stepForm}>
                    <FormItem
                        {...formItemLayout}
                        label="是否是精品"
                    >
                        {getFieldDecorator('is_best', {
                            initialValue:  data.is_best ? 1 : 0,
                            rules: [{
                                type: 'number'
                                // required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否是新品"
                    >
                        {getFieldDecorator('is_new', {
                            initialValue:  data.is_new ? 1 : 0,
                            rules: [{
                                type: 'number'
                                // required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否热销"
                    >
                        {getFieldDecorator('is_hot', {
                            initialValue: data.is_hot ? 1 : 0,
                            rules: [{
                                type: 'number'
                                // required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="是否特价促销"
                    >
                        {getFieldDecorator('is_promote', {
                            initialValue:  data.is_promote ? 1 : 0,
                            rules: [{
                                type: 'number'
                                // required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup onChange={this.promote}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    {this.state.isPromot ?
                        <div>
                        <FormItem
                            {...formItemLayout}
                            label={<span>促销价格</span>}
                        >
                            {getFieldDecorator('promote_price', {
                                initialValue: data.promote_price || 0,
                                rules: [{
                                    type: "number"
                                }],
                            })(
                                <InputNumber min={0} step={0.1} />
                            )}
                        </FormItem>
                        <FormItem
                        {...formItemLayout}
                        label="促销日期"
                        >
                            {getFieldDecorator('promote_date', {
                                rules: [{ type: 'array' }],
                                initialValue: data.xiangou_date !== undefined && data.xiangou_date[0]._isValid ? data.promote_date : []
                                // initialValue: []
                            })(
                            <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={this.onPromoteChange}/>
                            )}
                        </FormItem>
                        </div>
                        :
                        ""
                    }
                    <FormItem
                        {...formItemLayout}
                        label="是否限购"
                    >
                        {getFieldDecorator('is_xiangou', {
                            initialValue:  data.is_xiangou ? 1: 0,
                            rules: [{
                                type: 'number'
                                // required: true, message: '请选择',
                            }],
                        })(
                            <RadioGroup onChange={this.xiangou.bind(this)}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup>
                        )}
                    </FormItem>
                    {this.state.isXiangou ?
                        <div>
                            <FormItem
                                {...formItemLayout}
                                label="限购时间"
                            >
                                {getFieldDecorator('xiangou_date', {
                                    initialValue: data.xiangou_date !== undefined && data.xiangou_date[0]._isValid ? data.xiangou_date : [],
                                    // initialValue: [],
                                    rules: [{ type: 'array' }],
                                })(
                                    <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" onChange={this.onXiangouChange}/>
                                )}
                            </FormItem>
                            <FormItem
                                {...formItemLayout}
                                label={<span>限购设定数量</span>}
                            >
                                {getFieldDecorator('xiangou_num', {
                                    initialValue: data.xiangou_num || 0,
                                    rules: [{
                                        type: 'number',
                                    }],
                                })(
                                    <InputNumber min={0} step={1} />
                                )}
                            </FormItem>
                        </div>
                        : ""
                    }
                    <Divider style={{ margin: '24px 0' }} />
                    <Form.Item
                        style={{ marginBottom: 8 }}
                        wrapperCol={{
                            xs: { span: 24, offset: 0 },
                            sm: { span: formItemLayout.wrapperCol.span, offset: formItemLayout.labelCol.span },
                        }}
                        label=""
                    >
                        <Button onClick={this.onPrev}>
                            上一步
                        </Button>
                        <Button type="primary" onClick={this.onValidateForm} loading={submitting}  style={{ marginLeft: 8 }}>
                            下一步
                        </Button>
                        <Button type="default" onClick={this.stepSubmit} disabled={isDisplay} style={{marginLeft:'8px'}}>保存</Button>
                    </Form.Item>
                </Form>
            </Card>
        )
    }
}

